<!--  -->
<template>
  <div ref="pageComBox" class="app-container page_wrapper">
    <div ref="otherBox">
      <Params ref="params" @search="importPage" @addContract="addContract" />
    </div>

    <el-table
      ref="multipleTable"
      :data="dataList"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="加载中..."
      :max-height="tableHeight"
      :key="tableHeight"
      v-tabscroll="$getTableHeight"
    >
      <el-table-column
        prop="contractCode"
        label="合同编号"
        :width="tdWdith"
        fixed="left"
      >
      </el-table-column>
      <el-table-column
        prop="customerName"
        label="客户姓名"
        :width="tdWdith"
        fixed="left"
      >
      </el-table-column>

      <el-table-column prop="customerMobile" label="客户电话" :width="tdWdith">
      </el-table-column>
      <!-- <el-table-column prop="need" label="进件需求" :width="tdWdith">
      </el-table-column> -->
      <!-- <el-table-column prop="costRate" label="费率"></el-table-column> -->
      <el-table-column prop="productName" label="产品" :width="tdWdith" />
      <!-- <el-table-column prop="counts" label="进件数量" :width="tdWdith" /> -->
      <!-- <el-table-column prop="completion" label="完成度" :width="tdWdith" /> -->
      <el-table-column prop="deposit" label="在审件金额" :width="tdWdith" />
      <el-table-column prop="income" label="在审件佣金" :width="tdWdith" />
      <el-table-column prop="remark" label="进度" :width="tdWdith">
        <template slot-scope="{ row }">
          {{ PROGRESSSTATUSLIST[row.progress] }}
        </template>
      </el-table-column>
      <el-table-column label="状态" :width="tdWdith">
        <template slot-scope="scope">
          {{ scope.row.state === 1 ? "正常" : "作废" }}
        </template>
      </el-table-column>
      <el-table-column label="付款证明">
        <template slot-scope="{ row }">
          <el-image
            :src="item"
            class="tab_td_img"
            v-for="(item, index) in getImages(row.certificate)"
            :key="`img_${index}`"
            :preview-src-list="[item]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="incomeDate" label="收款日期" :width="tdWdith" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" :width="tdWdith" />
      <el-table-column prop="checkBy" label="审核人" :width="tdWdith" />
      <el-table-column prop="checkDate" label="审核日期" :width="tdWdith" />
      <el-table-column prop="updateBy" label="修改人" :width="tdWdith" />
      <el-table-column prop="updateDate" label="修改日期" :width="tdWdith" />
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editHandle(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <BasePagination
      v-model="page"
      :total="totalCount"
      :pageSize="pageSize"
      @change="pageOnChange"
    />
    <el-dialog
      title="新增进件"
      @updateEvent="updateEvent"
      @close="addInputDialog = false"
      :visible.sync="addInputDialog"
      :close-on-click-modal="false"
    >
      <Form
        @updateEvent="updateEvent"
        @change="closeInputDialog('addInputDialog')"
      />
    </el-dialog>
    <el-dialog
      title="编辑进件"
      :visible="editInputDialog"
      :close-on-click-modal="false"
    >
      <Form
        ref="Form"
        @updateEvent="updateEvent"
        @change="closeInputDialog('editInputDialog')"
        :submitType="2"
      />
    </el-dialog>
  </div>
</template>

<script>
import { progressOptions } from "./config";
import { importPage } from "@/api/customer";
import Params from "./Params.vue";
import Form from "./Form.vue";
import { PROGRESSSTATUSLIST } from "@/common/constants";
export default {
  components: { Params, Form },
  data() {
    return {
      page: 1,
      pageSize: 500,
      dataList: [],
      totalCount: 0,
      progressOptions,
      addInputDialog: false,
      editInputDialog: false,
      tdWdith: 160,
      longTdWidth: 500,
      PROGRESSSTATUSLIST: PROGRESSSTATUSLIST,
      loading: false,
      tableHeight: 0,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    // 计算表格的高度
    let _this = this
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    async importPage(form) {
      this.showAppLoading();
      try {
        this.loading = true;
        await importPage({
          page: this.page,
          size: this.pageSize,
          paramObject: { ...form },
        }).then((res) => {
          this.loading = false;
          const { data } = res;
          this.dataList = data.dataList || [];
          this.totalCount = data.totalCount;
        });
        this.hideAppLoading();
      } catch (error) {
        this.hideAppLoading();
      }
    },
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.$refs.params.search();
    },
    editHandle(item) {
      this.editInputDialog = true;
      this.$nextTick(() => {
        this.$refs.Form.setData(Object.assign({}, item));
      });
    },
    addContract() {
      this.addInputDialog = true;
    },
    updateEvent() {
      this.addInputDialog = false;
      this.$refs.params.search();
    },

    // 关闭弹框
    closeInputDialog(id) {
      console.log("666666666");
      this[id] = false;
    },

    getImages(str) {
      if (!str) {
        return [];
      }
      let arr = str.split(",");
      console.log(arr);
      return arr;
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
